

  <title>穿梭框组件666</title>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>穿梭框组件</cite></a>
    </div>
  </div>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">基础效果</div>
          <div class="layui-card-body">
            <div id="test-transfer-demo1"></div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">定义标题及数据源</div>
          <div class="layui-card-body">
            <div id="test-transfer-demo2"></div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">初始右侧数据集合</div>
          <div class="layui-card-body">
            <div id="test-transfer-demo3"></div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">显示搜索框</div>
          <div class="layui-card-body">
            <div id="test-transfer-demo4"></div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">数据格式解析</div>
          <div class="layui-card-body">
            <div id="test-transfer-demo5"></div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">穿梭时的回调</div>
          <div class="layui-card-body">
            <div id="test-transfer-demo6"></div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">实例调用</div>
          <div class="layui-card-body">
            <div class="layui-btn-container">
              <button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>
              <button type="button" class="layui-btn" lay-demotransferactive="reload">重载实例</button>
            </div>
            <div id="test-transfer-demo7"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
  layui.use(['admin', 'transfer', 'tree','layer', 'util'], function(){
    var $ = layui.$
    ,transfer = layui.transfer
    ,tree = layui.tree
    ,layer = layui.layer
    ,util = layui.util;

    
    //模拟数据
    var data1 = [
      {"value": "1", "title": "李白"}
      ,{"value": "2", "title": "杜甫"}
      ,{"value": "3", "title": "苏轼"}
      ,{"value": "4", "title": "李清照"}
      ,{"value": "5", "title": "鲁迅", "disabled": true}
      ,{"value": "6", "title": "巴金"}
      ,{"value": "7", "title": "冰心"}
      ,{"value": "8", "title": "矛盾"}
      ,{"value": "9", "title": "@@"}
    ]
    
    ,data2 = [
      {"value": "1", "title": "瓦罐汤"}
      ,{"value": "2", "title": "油酥饼"}
      ,{"value": "3", "title": "炸酱面"}
      ,{"value": "4", "title": "串串香", "disabled": true}
      ,{"value": "5", "title": "豆腐脑"}
      ,{"value": "6", "title": "驴打滚"}
      ,{"value": "7", "title": "北京烤鸭"}
      ,{"value": "8", "title": "烤冷面"}
      ,{"value": "9", "title": "毛血旺", "disabled": true}
      ,{"value": "10", "title": "肉夹馍"}
      ,{"value": "11", "title": "臊子面"}
      ,{"value": "12", "title": "凉皮"}
      ,{"value": "13", "title": "羊肉泡馍"}
      ,{"value": "14", "title": "冰糖葫芦", "disabled": true}
      ,{"value": "15", "title": "狼牙土豆"}
    ]
    ,data3 = [{
      title: '一级1'
      ,id: 1
      ,field: 'name1'
      ,checked: true
      ,spread: true
      ,children: [{
        title: '二级1-1 可允许跳转'
        ,id: 3
        ,field: 'name11'
        ,href: 'https://www.layui.com/'
        ,children: [{
          title: '三级1-1-3'
          ,id: 23
          ,field: ''
          ,children: [{
            title: '四级1-1-3-1'
            ,id: 24
            ,field: ''
            ,children: [{
              title: '五级1-1-3-1-1'
              ,id: 30
              ,field: ''
            },{
              title: '五级1-1-3-1-2'
              ,id: 31
              ,field: ''
            }]
          }]
        },{
          title: '三级1-1-1'
          ,id: 7
          ,field: ''
          ,children: [{
            title: '四级1-1-1-1 可允许跳转'
            ,id: 15
            ,field: ''
            ,href: 'https://www.layui.com/doc/'
          }]
        },{
          title: '三级1-1-2'
          ,id: 8
          ,field: ''
          ,children: [{
            title: '四级1-1-2-1'
            ,id: 32
            ,field: ''
          }]
        }]
      },{
        title: '二级1-2'
        ,id: 4
        ,spread: true
        ,children: [{
          title: '三级1-2-1'
          ,id: 9
          ,field: ''
          ,disabled: true
        },{
          title: '三级1-2-2'
          ,id: 10
          ,field: ''
        }]
      },{
        title: '二级1-3'
        ,id: 20
        ,field: ''
        ,children: [{
          title: '三级1-3-1'
          ,id: 21
          ,field: ''
        },{
          title: '三级1-3-2'
          ,id: 22
          ,field: ''
        }]
      }]
    },{
      title: '一级2'
      ,id: 2
      ,field: ''
      ,spread: true
      ,children: [{
        title: '二级2-1'
        ,id: 5
        ,field: ''
        ,spread: true
        ,children: [{
          title: '三级2-1-1'
          ,id: 11
          ,field: ''
        },{
          title: '三级2-1-2'
          ,id: 12
          ,field: ''
        }]
      },{
        title: '二级2-2'
        ,id: 6
        ,field: ''
        ,children: [{
          title: '三级2-2-1'
          ,id: 13
          ,field: ''
        },{
          title: '三级2-2-2'
          ,id: 14
          ,field: ''
          ,disabled: true
        }]
      }]
    },{
      title: '一级3'
      ,id: 16
      ,field: ''
      ,children: [{
        title: '二级3-1'
        ,id: 17
        ,field: ''
        ,fixed: true
        ,children: [{
          title: '三级3-1-1'
          ,id: 18
          ,field: ''
        },{
          title: '三级3-1-2'
          ,id: 19
          ,field: ''
        }]
      },{
        title: '二级3-2'
        ,id: 27
        ,field: ''
        ,children: [{
          title: '三级3-2-1'
          ,id: 28
          ,field: ''
        },{
          title: '三级3-2-2'
          ,id: 29
          ,field: ''
        }]
      }]
    }]
    transfer.render({
                elem: '#test-transfer-demo2'
				,theme: '' //页面按钮及主题颜色（未实现）
				,width: "666" //定义宽度（穿梭左右两侧统一宽度）（必填）
				,height: "666" //定义高度（必填）
				,dataUrl:"json/list_tree.json"//默认展示数据url（必填）
				,getDataAsync:"false"  //数据加载方式（默认true为异步加载；false为同步加载）
				,isShowTab:"false"//定义是否显示页签
				,tabData:[
					//页签数据定义
					{
						tabTitle: "树结构"  //自定义标题
						,tabindex:0//tab索引4
						,tabId: 'ztree' //定义页签唯一索引（必备属性）
						,showType: "tree"//页签数据展现形式
						,tabDataUrl:"json/list_tree.json"//页签数据Url
						,tabData: []//页签数据
						,isDefault:true//是否默认选中
						,isSearch:true//是否开启搜索功能
					},
					{
						tabTitle: "列表"  //自定义标题
						,tabindex:0//tab索引4
						,tabId: 'ztree2' //定义页签唯一索引（必备属性）
						,showType: "list"//页签数据展现形式
						,tabDataUrl:"json/list.json"//页签数据Url
						,tabData: []//页签数据
						,isDefault:false//是否默认选中
						,isSearch:true//是否开启搜索功能
					}
				]
				,selectedValue: []//回显数据默认为空
				,isSelectedRadio:"false"//已选数据是否单选，默认为false为多选，true为单选
				,isRankSelected:""//是否按排序字段展示已选数据，默认为false按穿梭字段展示已选数据，若true为按机构内排序字段展示已选数据(预留设计)
				,onchange: function(obj, index){
					layer.alert(JSON.stringify(obj));//穿梭数据
				}
				,ongetData: function(obj, index){
					// var getData = transfer.getData('key1'); //获取右侧已选数据
					layer.alert(JSON.stringify(obj));
				}
				,onreload:function(){
					layer.alert("重载组件！");
				}


			});
   var mydata = {
	"code": 0,
	"data": [
		{
		"id": "1",
		"title": "内蒙古自治区",
		"children":[
			{
				"id": "112",
				"title": "辽宁省"
			}, {
				"id": "113",
				"title": "吉林省"
			}, {
				"id": "114",
				"title": "黑龙江省"
			}
		]
	},{
		"id": "2",
		"title": "内蒙古自治区",
		"children":[
			{
				"id": "221",
				"title": "辽宁省"
			}, {
				"id": "222",
				"title": "吉林省"
			}, {
				"id": "223",
				"title": "黑龙江省"
			}
		]
	}]
}

    //基础效果
    // transfer.render({
    //             elem: '#test-transfer-demo1'
	// 			,theme: '' //页面按钮及主题颜色（未实现）
	// 			,width: "366" //定义宽度（穿梭左右两侧统一宽度）（必填）
	// 			,height: "366" //定义高度（必填）
	// 			// ,data: mydata //定义高度（必填）
	// 			,dataUrl:"json/list_tree.json"//默认展示数据url（必填）
	// 			,getDataAsync:"false"  //数据加载方式（默认true为异步加载；false为同步加载）
	// 			,isShowTab:"false"//定义是否显示页签
	// 			,tabData:[
	// 				//页签数据定义
	// 				{
	// 					tabTitle: "树结构"  //自定义标题
	// 					,tabindex:0//tab索引4
	// 					,tabId: 'ztree' //定义页签唯一索引（必备属性）
	// 					,showType: "tree"//页签数据展现形式
	// 					,tabDataUrl:"json/list_tree.json"//页签数据Url
	// 					,tabData: []//页签数据
	// 					,isDefault:true//是否默认选中
	// 					,isSearch:true//是否开启搜索功能
	// 				},
	// 				{
	// 					tabTitle: "列表"  //自定义标题
	// 					,tabindex:0//tab索引4
	// 					,tabId: 'ztree2' //定义页签唯一索引（必备属性）
	// 					,showType: "list"//页签数据展现形式
	// 					,tabDataUrl:"json/list.json"//页签数据Url
	// 					,tabData: []//页签数据
	// 					,isDefault:false//是否默认选中
	// 					,isSearch:true//是否开启搜索功能
	// 				}
	// 			]
	// 			,selectedValue: []//回显数据默认为空
	// 			,isSelectedRadio:"false"//已选数据是否单选，默认为false为多选，true为单选
	// 			,isRankSelected:""//是否按排序字段展示已选数据，默认为false按穿梭字段展示已选数据，若true为按机构内排序字段展示已选数据(预留设计)
	// 			,onchange: function(obj, index){
	// 				layer.alert(JSON.stringify(obj));//穿梭数据
	// 			}
	// 			,ongetData: function(obj, index){
	// 				// var getData = transfer.getData('key1'); //获取右侧已选数据
	// 				layer.alert(JSON.stringify(obj));
	// 			}
	// 			,onreload:function(){
	// 				layer.alert("重载组件！");
	// 			}
    //
    //
	// 		});
    transfer.render({
      elem: '#test-transfer-demo1'
      ,data: data1
    })


    //定义标题及数据源
    transfer.render({
      elem: '#test-transfer-demo2'
      ,title: ['候选文人', '获奖文人']  //自定义标题
      ,data: data1
      //,width: 150 //定义宽度
      ,height: 210 //定义高度
    })
   
    //初始右侧数据
    transfer.render({
      elem: '#test-transfer-demo3'
      ,data: data2
      ,value: ["1", "3", "5", "7", "9", "11"]
    })
   
    //显示搜索框
    transfer.render({
      elem: '#test-transfer-demo4'
      ,data: data2
      ,title: ['文本墨客', '获奖文人']
      ,showSearch: true
    })
   
    //数据格式解析
    transfer.render({
      elem: '#test-transfer-demo5'
      ,parseData: function(res){
        return {
          "value": res.id //数据值
          ,"title": res.name //数据标题
          ,"disabled": res.disabled  //是否禁用
          ,"checked": res.checked //是否选中
        }
      }
      ,data: [
        {"id": "1", "name": "李白"}
        ,{"id": "2", "name": "杜甫"}
        ,{"id": "3", "name": "@@"}
      ]
      ,height: 150
    })
   
    //穿梭时的回调
    transfer.render({
      elem: '#test-transfer-demo6'
      ,data: data1
      ,onchange: function(obj, index){
        var arr = ['左边', '右边'];
        layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
      }
    })
   
    //实例调用
    transfer.render({
      elem: '#test-transfer-demo7'
      ,data: data1
      ,id: 'key123' //定义唯一索引
    })
    //批量办法定事件
    util.event('lay-demoTransferActive', {
      getData: function(othis){
        var getData = transfer.getData('key123'); //获取右侧数据
        layer.alert(JSON.stringify(getData)); 
      }
      ,reload:function(){
        //实例重载
        transfer.reload('key123', {
          title: ['文人', '喜欢的文人']
          ,value: ['2', '5', '9']
          ,showSearch: true
        })
      }
    });
  });
  </script>